<template>
    <div style="display: flex;background-color: rgb(221.7, 222.6, 224.4); width: 100%; height: 350px">
      <el-form ref="dataFormRef" :model="dataForm" label-width="180px" style="margin-top: 25px;width: 800px" :rules="rules">
         <div style="margin-left: 30px;font-size: 20px;font-weight: 700">
            备份到服务器上
         </div>
         <el-form-item label="服务器备份文件夹路径" prop="folderPath">
         <el-input v-model="dataForm.folderPath" placeholder="请输入文件夹路径"/>
       </el-form-item>
       <div style="margin-left: 30px;font-size: 20px;font-weight: 700">
            备份到本地
         </div>
       <el-button type="primary" @click="backUpServer" style="margin-left:820px;margin-top: -160px;">备份</el-button>
         <el-button type="primary" @click="backUpLocal(true)">点击下载备份文件</el-button>
   </el-form>
   </div>
</template>

<script setup>
    import { valueEquals } from 'element-plus';
   import {ref,reactive,onMounted,getCurrentInstance} from 'vue';
    const proxy = getCurrentInstance().proxy;
   const dataFormRef = ref(null);
   // 表单
   const dataForm = reactive({
      folderPath: "E:\\UniCourses\\buct\\juniorI\\DataBase\\CourseDesign\\buct-train-workspace\\file",
   });
   // 校验
   const rules ={
        folderPath: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
        ],
    }
    /**
     * 备份到服务器上
     */
     const backUpServer = ()=>{
       // 校验
       dataFormRef.value.validate((valid) => {
          if(!valid){
            proxy.Message.error("请检查输入信息是否正确");
          }else{
             // 确认框
             proxy.Confirm({
                message: '确定备份？',
                okfun: async ()=>{
                  // 提交表单
                  let params = {};
                  Object.assign(params,dataForm);
                  let result = await proxy.Request.request({
                     url: proxy.Api.backupServer,
                     params: params
                  });
                  if(!result){
                     return;
                  }
                  proxy.Message.success("备份成功");
                },
             });
          }
       })
    }

    /**
     * 备份到本地
     */
 const backUpLocal = async (needConfirm=false)=>{
    if(needConfirm){
        proxy.Confirm({
            message: "确定要备份数据吗？",
            okfun: ()=>backUpLocal(false)
        });
        return;
    }
    let result = await proxy.Request.requestJSON({
        url: proxy.Api.backupLocal,
        responseType: 'arraybuffer'
    });
    if(!result){
        return;
    }
    let blob = new Blob([result.data], { type: 'text/plain' });
    const fileName = getCurrentDateTime()+".sql";
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a');
        link.style.display = 'none';
        var href = URL.createObjectURL(blob);
        link.href = href;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(href);
    }
    proxy.Message.success("备份成功");
}
const getCurrentDateTime =()=> {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      const milliseconds = String(now.getMilliseconds()).padStart(3, '0'); // 毫秒数需要补齐3位
      
      // 格式化日期和时间
      const formattedDateTime = `${year}-${month}-${day}-${hours}-${minutes}-${seconds}-${milliseconds}`;
      
      return formattedDateTime;
    }
</script>

<style scoped>

</style>